<script setup>
const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  height: {
    type: Number,
    default: 30
  }
})

const isType = (res, list = []) => {
  const lastDot = res.lastIndexOf('.')
  const houzui = res.substring(lastDot + 1, res.length)
  const result = houzui.toUpperCase()
  return list.includes(result)
}

const isImg = res => {
  const imgType = ['PNG', 'JPG', 'JPEG', 'GIF', 'WEBP', 'TIF']
  return isType(res, imgType)
}
const isVideo = res => {
  const imgType = ['MP4', 'AVI', 'MKV', 'WMV']
  return isType(res, imgType)
}
</script>

<template>
  <div v-if="props.value">
    <template v-for="item of props.value.split(',')" :key="item">
      <a-popover placement="left" v-if="isImg(item)">
        <template #content>
          <img :height="300" style="object-fit: contain;" :src="item"
            onerror="this.src=''" />
        </template>
        <img :height="props.height" :src="item" style="margin-right: 10px;"
          onerror="this.src=''" />
      </a-popover>
      <a-popover placement="left" v-else-if="isVideo(item)">
        <template #content>
          <video :height="300" style="object-fit: contain;" :src="item" muted autoplay></video>
        </template>
        <video :height="props.height" v-if="props.height > 30" style="object-fit: contain;" :src="item" muted
          autoplay></video>
        <span style="color: #09c690;cursor: pointer;" v-if="props.height === 30">播放</span>
      </a-popover>
    </template>
  </div>
  <div v-else>--</div>
</template>